<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="shortcut icon" href="http://yangwenxue.oschina.io/images/favicon.ico">
		<link rel="stylesheet" href="http://yangwenxue.oschina.io/css/font-awesome.min.css" type="text/css">
		<link rel="stylesheet" href="http://yangwenxue.oschina.io/css/register.css" type="text/css">
		<link rel="stylesheet" href="http://yangwenxue.oschina.io/css/boostrap/bootstrapValidator.min.css" type="text/css" media="screen">
		<link rel="stylesheet" href="http://yangwenxue.oschina.io/css/boostrap/bootstrap-datetimepicker.min.css" type="text/css" media="screen">
	</head>

	<body>
		<div class="py-5">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<img src="http://yangwenxue.oschina.io/images\user-1.jpg" id="show-head-image" class="rounded-circle img-fluid mx-auto d-block"> </div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<form id="form-registr-image" enctype="multipart/form-data">
							<div class="form-group"> <label>头像</label>
								<input type="file" class="form-control" name="file" accept="image/jpeg,image/gif, image/jpg,image/png"> </div>
						</form>
						<form class="" id="form-register">
							<div class="form-group"> <label>昵称</label>
								<input type="hidden" class="form-control" name="userImageUrl" id="userImageUrl" />
								<input type="text" name="userName" class="form-control" id="userName" placeholder="昵称"> </div>
							<div class="form-group"> <label>手机号</label>
								<input type="text" name="userPhone" readonly="readonly" class="form-control" id="userPhone"  placeholder="手机号"> </div>
							<div class="form-group"> <label>QQ</label>
								<input type="text" name="userQq" class="form-control" id="userQq"  placeholder="QQ"> </div>
							<div class="form-group"> <label>密码</label>
								<input type="password" name="userPwd" class="form-control" id="userPwd"  placeholder="密码"> </div>
							<div class="form-group"> <label>性别</label>
								<select name="userSex" class="form-control" id="userSex" >
									<option value="1">男</option>
									<option value="0">女</option>
								</select>
							</div>
							<div class="form-group"> <label>出身日期</label>
								<div class="input-append date" id="datetimepicker" data-date="" data-date-format="yyyy-MM-dd">
									<input class="span2 form-control" size="16" type="text" name="userBirthday" id="userBirthday" >
									<span class="add-on"><i class="icon-th"></i></span>
								</div>
								<div class="form-group"> <label>邮箱</label>
									<input type="text" name="userEmail" class="form-control" placeholder="邮箱" id="userEmail"  data-type="email"> </div>
								<div class="form-group"> <label>地址</label>
									<input type="text" name="userAddress" class="form-control" id="userAddress"  placeholder="地址"> </div>
								<div class="form-group"> <label>毕业院校</label>
									<input type="text" name="userSchool" class="form-control" id="userSchool"  placeholder="毕业院校"> </div>
								<div class="form-group"> <label>自我描述</label> <textarea type="text" id="userDescription"  name="userDescription" class="form-control" placeholder="自我描述"></textarea> </div>
								<button type="button" class="btn btn-primary" id="btn-edit">修改</button>
						</form>
						</div>
					</div>
				</div>
			</div>
			<div id="do-success" class="alert alert-success" style="display: none;">
				<a href="#" class="close" data-dismiss="alert">&times;</a>
				<strong>操作成功！</strong>
			</div>
			<div id="do-warn" class="alert alert-warning" style="display: none;">
				<a href="#" class="close" data-dismiss="alert">&times;</a>
				<strong>操作失败！</strong>
			</div>
			<script src="http://yangwenxue.oschina.io/js/jquery/jquery.min.js"></script>
			<script src="http://yangwenxue.oschina.io/js/tether.min.js"></script>
			<script src="http://yangwenxue.oschina.io/js/boostrap/bootstrap.min.js"></script>
			<script src="http://yangwenxue.oschina.io/js/boostrap/bootstrapValidator.min.js"></script>
			<script src="http://yangwenxue.oschina.io/js/boostrap/bootstrap-datetimepicker.min.js"></script>
			<script src="http://yangwenxue.oschina.io/js/boostrap/bootstrap-datetimepicker.zh-CN.js"></script>
			<script src="../js/common.js"></script>

	</body>
	<script type="application/javascript">
		$(function() {
			$.ajax({
				type: "get",
				dataType: 'jsonp',
				url: resPath + "user/info",
				jsonp: 'callback',
				jsonpCallback: "callback",
				success: function(result) {
					var status = parseInt(result.status);
					switch(status) {
						case 200:
							var imageUrl = result.data.userImageUrl;
							if(imageUrl != null && imageUrl != '' && imageUrl != undefined){
								$("#userImageUrl").va;(imageUrl);
								$("#show-head-image").attr("src",imageUrl);
							}
							$("#userName").val(result.data.userName);
							$("#userRankId").val(result.data.userRankId);
							$("#userSex").val(result.data.userSex);
							$("#userEmail").val(result.data.userEmail);
							$("#userMark").val(result.data.userMark);
							$("#userSchool").val(result.data.userSchool);
							$("#userPhone").val(result.data.userPhone);
							$("#userQq").val(result.data.userQq);
							$("#userAddress").val(result.data.userAddress);
							$("#userBirthday").val(new Date(result.data.userBirthday).Format("yyyy-MM-dd"));
							$("#userDescription").html(result.data.userDescription);

							// 给日期类对象添加日期差方法，返回日期与diff参数日期的时间差，单位为天
							Date.prototype.diff = function(date) {
								return(this.getTime() - date.getTime()) / (24 * 60 * 60 * 1000);
							}
							// 构造两个日期，分别是系统时间和2013/04/08 12:43:45
							var now = new Date();
							// 调用日期差方法，求得参数日期与系统时间相差的天数
							var diff = now.diff(new Date(result.data.userBirthday));
							$("#age").html(Math.ceil(diff));
							break;
						case 2001:
							alert(result.msg);
							window.location.href = "../index.html";
							break;
						default:
							do_warn("操作失败，请重新试试");
							break;
					}
				},
				error: function(err) {
					console.info(err);
					do_warn(err);
				}
			});
			$('#datetimepicker').datetimepicker({
				format: 'yyyy-mm-dd',
				/*此属性是显示顺序，还有显示顺序是mm-dd-yyyy*/
				autoclose: true,
				initialDate: new Date(),
				minView: 2, //０表示分钟（默认），１表示小时，而２表示天
				language: 'zh-CN', // 中文支持，需要引入bootstrap-datetimepicker.zh-CN.js
				startView: 2, //0 为小时视图;1 为天视图;2 为月视图（为默认值）;3 为年视图;4 为十年视图
				todayHighlight: true, //Boolean. 默认值: false;如果为true, 高亮当前日期
				keyboardNavigation: true, //Boolean. 默认值: true;是否允许通过方向键改变日期
				todayBtn: true
			});
			// 校验
			function validatorRegisterForm() {
				$('#form-register').bootstrapValidator({
					message: '必输项',
					feedbackIcons: {
						valid: 'glyphicon glyphicon-ok',
						invalid: 'glyphicon glyphicon-remove',
						validating: 'glyphicon glyphicon-refresh'
					},
					fields: {
						userName: {
							message: '用户名不能为空',
							validators: {
								notEmpty: {
									message: '用户名不能为空'
								},
								stringLength: {
									max: 16,
									message: '用户名称不得超过16位'
								}
							}
						},
						userPhone: {
							message: '手机号不能为空',
							validators: {
								notEmpty: {
									message: '用户名不能为空'
								},
								regexp: {
									regexp: /^1[3|5|7|8][0-9]\d{4,8}$/,
									message: '请注意手机号格式'
								}
							}
						},
						userQq: {
							message: 'QQ不能为空',
							validators: {
								notEmpty: {
									message: 'QQ不能为空'
								},
								regexp: {
									regexp: /^[1-9][0-9]{4,}$/,
									message: '请注意QQ格式'
								}
							}
						},
						userPwd: {
							validators: {
								notEmpty: {
									message: '密码不能为空'
								},
								regexp: {
									regexp: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
									message: '密码必须包含数字和字母且长度不得小于8，不得大于16'
								}
							}
						},
						userBirthday: {
							message: '出生日期不能为空',
							validators: {
								notEmpty: {
									message: '出生日期不能为空'
								},
								date: {
									format: 'YYYY-MM-DD',
									message: '日期格式不正确'
								}
							}
						},
						userEmail: {
							validators: {
								notEmpty: {
									message: '邮箱不能为空'
								},
								emailAddress: {
									message: '请注意邮箱格式'
								}
							}
						},
						userAddress: {
							message: '地址不能为空',
							validators: {
								notEmpty: {
									message: '地址不能为空'
								}
							}
						},
						userSchool: {
							message: '毕业院校不能为空',
							validators: {
								notEmpty: {
									message: '毕业院校不能为空'
								}
							}
						}
					}
				});
			}
			// 上传头像
			function uploadHeadImage() {
				// 先上传头像
				$.ajax({
					data: new FormData($('#form-registr-image')[0]),
					async: true,
					type: "post",
					url: resPath + "upload/image",
					processData: false,
					contentType: false,
					beforeSend: function(XMLHttpRequest) {
						// 禁用按钮防止重复提交
						$("#btn-register").attr({
							disabled: "disabled"
						});
					},
					success: function(result) {
						// 回显头像
						$("#show-head-image").attr("src", result);
						$("#userImageUrl").val(result);
						submitForm();
					},
					complete: function() {
						// 禁用按钮防止重复提交
						$("#btn-register").removeAttr("disabled");
					},
					error: function(err) {
						console.info(err);
						do_warn(err);
					}
				});
			}
			// 提交表单数据
			function submitForm() {
				$.ajax({
					data: $('#form-register').serialize(),
					type: "get",
					dataType: 'jsonp',
					url: resPath + "user/edit",
					jsonp: 'callback',
					jsonpCallback: "callback",
					success: function(result) {
						var status = parseInt(result.status);
						switch(status) {
							case 200:
								window.location.href = "../index.html";
								break;
							case 500:
								do_warn(result.msg);
								break;
							default:
								do_warn(result.msg);
								break;
						}
					},
					error: function(err) {
						console.info(err);
						do_warn(err);
					}
				});
			}
			validatorRegisterForm();
			$("#btn-edit").click(function() {
				var filePath = $("input[name=file]").val();
				if(filePath != null && filePath != undefined && filePath != ""){
					uploadHeadImage();
				}else{
					submitForm();
				}
			})
		})
	</script>

</html>